<template>
  <div class='teamPriceList'>
    <header>
      <div class="div">
        <img src="../../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>{{title}}</span>
      </div>
      <div class="div">
        <img v-show="(((type == '1' || type =='2' || type ==5) || isAll == 1) && select === 1) || select === 2" @click="add" src="../../../assets/蓝添加.png" alt="">
        <span v-show="(((type == '1' || type =='2' || type ==5) || isAll == 1) && select === 1) || select === 2" @click="add" class="solid">新增</span>
      </div>
    </header>
    <div class='view'>
      <div class='tabBar'>
        <router-link :to="{path:'/teamPriceList/priceList',query: {userid: this.userid, team_id: this.team_id, id: this.team_id, isAll: 1, showNav: 1}}" replace class='tab' :class="{'act':select===1}" @click.native='select=1'>
<!--          团队服务项目-->
          服务项目维护
          <p class='line'></p>
        </router-link>
        <router-link :to="{path: '/teamPriceList/servicePackList', query: {userid: this.userid, team_id: this.team_id, isAll: this.isAll, doc_user_id: this.userid, showNav: 1}}" replace class='tab' :class="{'act':select===2}" @click.native='select=2'>
<!--          服务项目组合-->
          项目组合维护
          <p class='line'></p>
        </router-link>

      </div>
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'teamPriceList',
  data () {
    return {
      userid: this.$route.query.userid,
      team_id: this.$route.query.team_id,
      id: this.$route.query.id,
      isAll: this.$route.query.isAll,
      doc_user_id: this.$route.query.userid,
      type: Number(this.$route.query.type), // priceList
      select: 1
    }
  },
  computed: {
    title () {
      let title = ''
      if (this.team_id) {
        title = '团队服务项目'
      } else {
        title = '我提供的服务'
      }
      document.title = title
      return title
    }
  },
  mounted () {
    console.log('路由', this.$route, this.select, this.isAll, this.type)
    this.$route.name === 'PriceList' ? this.select = 1 : this.select = 2
  },
  methods: {
    // 新增
    add () {
      if (this.select === 1) {
        sessionStorage.removeItem('teamPriceDetail')
        this.$router.push({path: '/priceDetail', query: {userid: this.userid, team_id: this.team_id}})
      } else {
        this.$router.push({path: '/keepServicePack', query: {team_id: this.team_id}})
      }
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped lang='scss'>

.teamPriceList{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
}

header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 999;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}

.view{
  width: 100%;
  height: 100%;
}
.tabBar{
  width: 100%;
  height: 44px;
  overflow: hidden;
  background-color: white;

  .tab{
    width: 50%;
    float: left;
    font-size: 15px;
    color: #333333;
    line-height: 44px;
    text-align: center;
    position: relative;
    .line{
      display: none;
      width: 25px;
      height: 2px;
      border-radius: 1px;
      background-color: #1DA4F2;
      position: absolute;
      left: 50%;
      bottom: 5px;
      transform: translateX(-50%);
    }

    &.act{
      color: #1DA4F2;
      .line{
        display: block;
      }
    }

  }
}
</style>
